


        main{
            padding-top: 0px;
        }

        main section{
            height: 100vh;
        }
        

        main{
            overflow: hidden;
        }

        main .heading{
            position: relative;
        }
        main .heading .headSwp{
            height: 100%;
        }
        main .heading .txtSwitch{
            position: absolute;
            width: 360px;
            right: 14%;
            bottom: 90px;
            color: #fff;
            z-index: 5;
        }
        main .heading .txtSwitch .txt{
            position: relative;
        }
        main .heading .txtSwitch .txt,
        main .heading .txtSwitch .txt .itm .inner{
            height: 260px;
        }
        
        main .heading .txtSwitch .txt .itm{
            z-index: -1;
            height: 0%;
            overflow: hidden;
            transition: height .6s;
        }
        main .heading .txtSwitch .txt .itm:first-child{
            z-index: 0;
        }
        main .heading .txtSwitch .txt .itm.active{
            height: 100%;
            /*延迟特效*/
            transition-duration: .61s;
        }
        main .heading .txtSwitch .txt .itm .inner{
            position: absolute;
            width: 100%;
            top: 0px;
            left: 0px;
            background: #212121;
            flex-direction: column;
        }
        main .heading .txtSwitch .txt .itm.active,
        main .heading .txtSwitch .txt .itm.active .inner{
            top: auto;
            bottom: 0px;
        }
        main .heading .txtSwitch .txt .itm .inner p{
            line-height: 1;
            font-size: 27px;
            text-align: right;
            padding: 0px 55px;
        }
        main .heading .txtSwitch .txt .itm .inner p:first-child{
            font-size: 38px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        main .heading .txtSwitch .control{
            height: 285px;
            position: relative;
            z-index: 2;
            flex-direction: column;
            text-align: center;
        }
        main .heading .txtSwitch .control::after{
            content: '';
            opacity: .9;
            background: #2d2d2d;
            z-index: -1;
        }
        main .heading .txtSwitch .control .nums{
            font-size: 19px;
        }
        main .heading .txtSwitch .control .process p{
            margin: 40px 0px;
            position: relative;
            display: inline-block;
            vertical-align: top;
            background: #fff;
            height: 2px;
            width: 116px;
        }
        main .heading .txtSwitch .control .process p span{
            display: block;
            width: 0%;
            background: #e60012;
            transition: transform ease .3s,width .3s ease;
            transform: translateX(0%);
            margin-top: -1px;
            height: 4px;
        }
        main .heading .txtSwitch .control img{
            position: absolute;
            width: 16px;
            top: 50%;
            transform: translateY(-50%);
            left: calc(100% + 24px);
        }
        main .heading .txtSwitch .control .prev{
            left: auto;
            right: calc(100% + 24px);
        }
        

        main .pro{
            z-index: 2;
            position: relative;
            background: #f0f0e6;
        }
        main .pro .contn{
            height: 100%;
            position: relative;
            z-index: 2;
        }
        main .pro .lines{
            z-index: 0;
        }
        main .pro .color{
            background: #f9faf5;
            position: absolute;
            width: 100%;
            height: 252vh;
            top: 0px;
            left: 0px;
            z-index: -1;
            clip-path: polygon(0% 0%, 68% 0%, 0% 100%);
        }
        .mobileDevice main .pro .color{
            display: none;
        }
        main .pro::before,
        main .pro .color .red{
            content: '';
            position: absolute;
            background: #e60012;
        }
        main .pro::before{
            width: 240px;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .4s;
            height: calc(200px + 21.7vh + 13vh + 90px);
            top: -90px;
            left: 12.5%;
            z-index: 1;
        }
        main .pro.complete::before{
            transform: scaleX(1);
        }
        main .pro .color .red{
            width: 100%;
            top: 30px;
            left: 0px;
            height: calc(100% - 100vh + 20px);
        }
        main .pro .contn{
            width: 75%;
            margin: 0 auto;
            padding-top: 13vh;
            padding-bottom: 14.8vh;
            position: relative;
        }
        main .pro .contn>*{
            width: 50%;
            height: 100%;
            position: relative;
        }
        main .pro .contn .txt{
            padding-top: 21.7vh;
            left: 1px;
        }
        main .pro .contn .txt .ttlBox{
            position: absolute;
            top: 0px;
            left: 0px;
            transition: width .4s;
            white-space: nowrap;
            width: 0%;
            overflow: hidden;
        }
        main .pro .contn .txt .ttlBox .ttl{
            float: left;
        }
        main .pro .contn .txt .ttl p{
            font-size: 25px;
        }
        main .pro .contn .txt .ttl .cn{
            font-size: 45px;
            margin-bottom: 20px;
        }
        main .pro .contn .txt .proSwp{
            height: 600px;
        }
        main .pro .contn .txt .proSwp .swiper-slide>*{
            opacity: 0;
            transform: translateY(30px);
            transition: .5s opacity,transform .5s;
        }
        main .pro.complete .contn .txt .proSwp .swiper-slide>*{
            opacity: 1;
            transform: translateY(0px);
        }
        main .pro .contn .txt .proSwp .swiper-slide .num{
            height: 50px;
            width: 60px;
            font-size: 22px;
            border-bottom: 2px solid #000;
            transition-delay: .3s;
        }
        main .pro .contn .txt .proSwp .proName{
            margin-top: 13px;
            font-size: 137px;
            font-weight: bold;
            line-height: 1;
            transition-delay: .4s;
        }
        main .pro .contn .txt .proSwp .t{
            font-size: 30px;
            margin-top: 20px;
            padding-right: 150px;
            transition-delay: .5s;
            line-height: 1.5;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            white-space: normal;
            word-break: break-all;
        }
        main .pro .contn .txt .proSwp .swiper-slide .more{
            margin-top: 8vh;
            width: 260px;
            line-height: 70px;
            border: 1px solid #000;
            font-size: 22px;
            font-weight: bold;
            letter-spacing: 2px;
            padding-left: 40px;
            display: block;
            transform: translateY(0px);
            transition: border .3s,color .3s,opacity .3s .2s;
        }
        main .pro .contn .txt .proSwp .swiper-slide .more:hover{
            border-color: #e60012;
            color: #e60012;
        }
        main .pro .contn .txt .proSwp .more img{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 25px;
            width: auto;
            transition: opacity .3s;
        }
        main .pro .contn .txt .proSwp .more img:last-child,
        main .pro .contn .txt .proSwp .more:hover img{
            opacity: 0;
        }
        main .pro .contn .txt .proSwp .more:hover img:last-child{
            opacity: 1;
        }
        main .pro .contn .proShow,
        main .pro .contn .proShow .itm{
            opacity: 0;
        }
        main .pro .contn .proShow{
            transition: opacity .3s .2s;
        }
        main .pro .contn .proShow .itm{
            transition: opacity .4s;
        }
        main .pro .contn .proShow img{
            width: auto;
            max-width: 500px;
            height: auto;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 40px;
        }
        main .pro.complete .contn .proShow,
        main .pro .contn .proShow .itm.active{
            opacity: 1;
        }

        main .pro .sideNav{
            width: 13vh;
            position: absolute;
            top: 13vh;
            bottom: 0px;
            right: 0px;
            margin: auto;
            transform:translateX(260px);
            transition: .6s transform;
            z-index: 5;
        }
        main .pro.complete .sideNav{
            transform: translateX(0px);
        }
        main .pro .sideNav .num{
            position: absolute;
            line-height: 13vh;
            width: 120px;
            font-size: 33px;
            font-weight: bold;
            color: #faca03;
            top: 0px;
            left: 0px;
            transform: translateX(-100%);
            border-right: 4px solid #faca03;
            text-align: right;
            padding-right: 60px;
        }
        main .pro .sideNav .num::after{
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 56px;
            height: 4px;
            background: #faca03;
            right: 0px;
        }
        main .pro .sideNav .proNavSwp{
            height: calc(52vh + 9px);
        }
        main .pro .sideNav .proNavSwp .swiper-slide{
            background: #fff;
            cursor: pointer;
        }
        
        main .pro .sideNav .control{
            margin-top: 50px;
            position: relative;
            height: 172px;
        }
        main .pro .sideNav .control>*{
            height: 100%;
            transition: height .3s;
            height: 52px;
            overflow: hidden;
            flex-direction: column;
            cursor: pointer;
        }
        main .pro .sideNav .control img{
            height: 32px;
            width: auto;
            margin-bottom: 20px;
        }
        main .pro .sideNav .control p{
            height: 120px;
        }
        main .pro .sideNav .control p span{
            font-size: 25px;
            width: 25px;
            line-height: 1;
            text-align: center;
        }
        main .pro .sideNav .control .next{
            position: absolute;
            bottom: -52px;
            width: 100%;
            left: 0px;
            flex-direction: column-reverse;
            border-top: 2px solid #000;
        }
        main .pro .sideNav .control .active{
            height: 100%;
            pointer-events: all;
        }
        main .pro .sideNav .control .next img{
            margin-bottom: 0px;
            margin-top: 20px;
        }
        
        

        main .comp{
            z-index: 3;
            position: relative;
            padding: 0px 112px;
            padding-top: 16vh;
            padding-bottom: 12vh;
        }
        main .comp .contn,
        main .comp .contn>*{
            height: 100%;
        }
        main .comp .contn{
            justify-content: space-between;
            color: #fff;
            position: relative;
            z-index: 5;
        }
        main .comp .contn .introSwp{
            max-width: 950px;
            margin: initial;
            margin-right: 60px;
            flex: 1;
        }
        main .comp .contn .introSwp .swiper-slide{
            padding: 50px 0px;
            padding-right: 10px;
            overflow-y: auto;
        }
        main .comp .contn .introSwp .swiper-slide{
            height: 100%;
        }
        main .comp .contn .introSwp .swiper-slide::-webkit-scrollbar{
            width: 6px;
            height: 6px;
        }
        main .comp .contn .introSwp .swiper-slide::-webkit-scrollbar-thumb{
            border-radius: 3px;
            background: rgba(255,255,255, .08);
            
        }
        main .comp .contn .introSwp .swiper-slide:hover::-webkit-scrollbar-thumb{
            background: rgba(255,255,255, .3);
        }
        main .comp .contn .introSwp .swiper-slide::-webkit-scrollbar-track{
            background: rgba(0,0,0,0);
        }
        main .comp .contn .introSwp .ttl p{
            font-size: 66px;
        }
        main .comp .contn .introSwp .ttl .eng{
            margin-bottom: 20px;
        }
        main .comp .contn .introSwp .txt{
            margin-top: 60px;
            margin-bottom: 70px;
            line-height: 2;
            font-size: 25px;
        }
        main .comp .contn .introSwp .txt p:first-child{
            font-weight: bold;
            font-size: 50px;
            line-height: 1;
            margin-bottom: 30px;
        }
        main .comp .contn .introSwp .more{
            position: relative;
            display: block;
            width: 420px;
            line-height: 65px;
            font-size: 25px;
            text-align: center;
            border: 2px solid #fff;
            border-radius: 8px;
            transition: background .5s;
        }
        main .comp .contn .introSwp .more:hover{
            background: #e60012;
        }
        main .comp .contn .introSwp .more img{
            position: absolute;
            right: 30px;
            width: auto;
            top: 50%;
            transform: translateY(-50%);
        }
        main .comp .contn .sideNav{
            width: 500px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            z-index: 5;
            flex-direction: column;
        }
        main .comp .contn .sideNav::after,
        main .comp .contn .sideNav .btn::after{
            content: '';
            background: #aeaeae;
            opacity: .35;
            z-index: -1;
        }
        main .comp .contn .sideNav .btn::after{
            opacity: .5;
        }
        main .comp .contn .sideNav .btn{
            height: 36px;
            position: relative;
            z-index: 2;
            overflow: hidden;
        }
        main .comp .contn .sideNav .btn img{
            width: 21px;
            cursor: pointer;
        }
        main .comp .contn .sideNav .navSwp{
            flex: 1;
            border-bottom: 1px solid #fff;
            width: 100%;
        }
        main .comp .contn .sideNav .navSwp .swiper-slide{
            transition: background .5s;
            padding: 0px 28px;
            cursor: pointer;
        }
        main .comp .contn .sideNav .navSwp .swiper-slide{
            border-top: 1px solid #fff;
            transition: background .3s;
        }
        main .comp .contn .sideNav .navSwp .swiper-slide .ttl{
            position: relative;
            margin-right: 10px;
        }
        main .comp .contn .sideNav .navSwp .swiper-slide .ttl::before{
            content: '';
            position: absolute;
            height: 100%;
            width: 4px;
            top: 0px;
            left: -28px;
            background: #fff;
            opacity: 0;
            transition: .3s opacity;
        }
        main .comp .contn .sideNav .navSwp .swiper-slide.active .ttl::before{
            opacity: 1;
        }
        main .comp .contn .sideNav .navSwp .swiper-slide .ttl p{
            font-size: 19px;
        }
        main .comp .contn .sideNav .navSwp .swiper-slide .ttl .eng{
            margin-bottom: 6px;
        }
        main .comp .contn .sideNav .navSwp .swiper-slide .pic{
            width: 170px;
            height: 100px;
        }
        main .comp .contn .sideNav .navSwp .swiper-slide.active{
            background: rgba(255,255,255,.3);
        }


        main .distribution{
            z-index: 1;
            position: relative;
            background: #f0f0e6;
            overflow: hidden;
        }
        main .distribution .ttl{
            position: absolute;
            left: 150px;
            bottom: 13vh;
        }
        main .distribution .ttl p{
            font-size: 36px;
        }
        main .distribution .ttl .cn{
            font-size: 58px;
            margin-bottom: 20px;
        }
        main .distribution .map{
            -webkit-animation:float 11s infinite;
            animation:float 11s infinite;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            height: 90vh;
            bottom: 0px;
        }
        main .distribution .mapPic{
            height: 100%;
            width: auto;
        }
        main .distribution .map div{
            position: absolute;
            z-index: 2;
        }
        main .distribution .map div + p{
            position: absolute;
            overflow: hidden;
            bottom: 38%;
            right: calc(17% - 15px);
            transform-origin: bottom right;
            pointer-events: none;
        }
        main .distribution .map div + p i{
            display: block;
            width: 100%; 
            padding-bottom: 100%;
            margin-bottom: -50%;
            position: relative;
        }
        main .distribution .map div + p i span{
            position: absolute;
            width: 100%;
            height: 50%;
            top: 0px;
            right: 0px;
            overflow: hidden;
            transition: .3s width;
            transform: rotate(-180deg);
            width: 0%;
        }
        main .distribution .map.frozen div + p i span{
            width: 100%;
        }
        main .distribution .map div + p i span::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 200%;
            left: 0px;
            bottom: 0px;
            transform: rotateX(55deg);
            border-radius: 50%;
            border: 2px solid #faca03;
        }
        main .distribution .map div p{
            font-size: 25px;
            line-height: 1;
        }
        
        main .distribution .map em{
            width: 14px;
            height: 14px;
            background: #fff;
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translate(-50%,50%);
            z-index: -1;
            border-radius: 50%;
            opacity: 0;
            transition: 2s opacity;
        }
        main .distribution .map .brth em{
            opacity: 1;
        }
        
        main .distribution .map em::after{
            content: '';
            border-radius: 50%;
            position: absolute;
            width: 200%;
            height: 200%;
            background: #fff;
            opacity: .4;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: -1;
        }
        main .distribution .map div:nth-last-child(3)::after{
            content: '';
            width: 15px;
            height: 15px;
            position: absolute;
            top: 50%;
            left: calc(100% + 8px);
            transform: translateY(-50%);
            background: url(../img/index/star.png) no-repeat center center;
        }
        main .distribution .map div:last-child em{
            display: none;
        }
        main .distribution .map .loc{
            position: absolute;
            width: 30px;
            z-index: 5;
        }
        main .distribution .map .logo{
            position: absolute;
            width: 130px;
        }
        @-webkit-keyframes float {
            0% {
                margin-bottom: 0;
                margin-left: 0px;
            }
            20%{
                margin-bottom: 10px;
                margin-left: 6px;
            }
            40%{
                margin-bottom: -5px;
                margin-left: 12px;
            }
            60%{
                margin-bottom: 5px;
                margin-left: -6px;
            }
            80%{
                margin-bottom: -10px;
                margin-left: -6px;
            
            }
            100% {
                margin-bottom: 0;
                margin-left: 0px;
            }
        }


        main .comp .picFlip,
        main .machining .picFlip{
            z-index: 0;
            overflow: hidden;
        }
        main .comp .picFlip:after{
            content: '';
            z-index: 2;
            background-color: #272727;
            opacity: .1;
        }
        main .comp .picFlip p{
            opacity: 0;
            transition-property: filter,opacity,transform;
            transition-duration: .5s;
            transition-timing-function: ease;
            filter: blur(10px);
            -webkit-filter: blur(10px);  /* chrome, opera */
            -ms-filter: blur(10px);
            -moz-filter: blur(10px);
            transform: scale(1.1);        
        }
        main .comp .picFlip p.active{
            filter: blur(0px);
            -webkit-filter: blur(0px);  /* chrome, opera */
            -ms-filter: blur(0px);
            -moz-filter: blur(0px);
            opacity: 1;
            transform: scale(1);        
        }

        main .machining{
            position: relative;
            background: #acacab;
        }
        main .machining .contn{
            position: relative;
            z-index: 2;
            height: 100%;
        }
        main .machining .contn .head{
            padding: 0px 40px;
            padding-top: 8vh;
            width: 100%;
            max-width: 1400px;
            
            margin:0 auto;
            justify-content: space-between;
        }
        main .machining .contn .head .ttl .cn,
        main .news .head .ttl .cn{
            font-size: 77px;
            margin-bottom: 25px;
        }
        main .machining .contn .head .ttl .eng,
        main .news .head .ttl .eng{
            font-size: 36px;
        }
        main .machining .contn .head .more{
            margin-right: 30px;
            font-size: 53px;
            font-weight: bold;
            line-height: 60px;
            transition: all .3s;
        }
        main .machining .contn .head .more img{
            width: 60px;
            margin-left: 50px;
            display: inline-block;
            vertical-align: top;
            transition: transform .3s,margin .3s;
        }
        main .machining .contn .head .more:hover{
            padding-left: 20px;
        }
        main .machining .contn .head .more:hover img{
            margin-left: 40px;
            transform: translateX(-10px);
        }
        main .machining .contn .mecNavSwp{
            height: 64vh;
            width: 100%;
            position: absolute;
            bottom: 0px;
            left: 0px;
        }
        main .machining .contn .mecNavSwp .swiper-slide{
            width: 15.625%;
            transition: width .3s .1s;
        }
        main .machining .contn .mecNavSwp .swiper-slide.active{
            width: 37.5%;
            transition-duration: .4s;
            transition-delay: 0s;
        }
        main .machining .contn .mecNavSwp .swiper-slide .inner{
            bottom: 0px;
            position: absolute;
            height: calc(100% - 35px);
            width: 100%;
            left: 0px;
            overflow: hidden;
            transition: height .3s .1s;
        }
        main .machining .contn .mecNavSwp .swiper-slide.active .inner{
            height: 100%;
            transition-duration: .4s;
            transition-delay: 0s;
        }
        main .machining .contn .mecNavSwp .swiper-slide .inner img{
            height: 64vh;
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
        }
        main .machining .contn .mecNavSwp .swiper-slide .inner .t{
            z-index: 3;
            font-size: 53px;
            color: #fff;
            font-weight: bold;
            opacity: 0;
            transition: opacity .4s;
            padding: 0px 20px;
            text-align: center;
        }
        main .machining .contn .mecNavSwp .swiper-slide.active .inner .t{
            opacity: 1;
            transition-delay: .3s;
        }
        main .machining .contn .mecNavSwp .swiper-slide .inner::after{
            content: '';
            background: #3c3c3c;
            opacity: .5;
            transition: opacity .4s;
            z-index: 2;
        }
        main .machining .contn .mecNavSwp .swiper-slide.active .inner::after{
            opacity: .1;
            transition-delay: .3s;
        }
        main .machining .picFlip{
            opacity: .3;
        }
        main .machining .picFlip>*{
            width: 50%;
            height: 100%;
        }
        main .machining .picFlip .swiper-slide{
            overflow: hidden;
        }
        main .machining .picFlip img{
            width: 200%;
            position: absolute;
            top: 0px;
            right: 0px;
        }
        main .machining .picFlip .lftSwp img{
            right: auto;
            left: 0px;
        }
        

        main .news{
            position: relative;
        }
        

        main .news .lines{
            z-index: 2;
        }
        main .news .contn{
            position: relative;
            height: 100%;
            padding-top: 7vh;
        }
        main .news .contn .head{
            width: 75%;
            margin: 0 auto;
            position: relative;
            justify-content: space-between;
        }
        main .news .contn .head .ttl{
            padding-left: 60px;
        }
        main .news .contn .head .category{
            position: absolute;
            top: 28px;
            left: 75%;
            margin-left: 1px;
            width: 260px;
        }
        main .news .contn .head .category a{    
            display: block;
            width: 100%;
            line-height: 75px;
            border: 1px solid #000;
            font-size: 22px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
            transition: color .4s,border .3s;
        }
        main .news .contn .head .category a:hover{
            color: #e60012;
            border-color: #e60012;
        }
        main .news .contn .info{
            height: 63%;
            width: 100%;
            position: absolute;
            left: 0px;
            bottom: 0px;
            background: #f0f0e6;
            padding-top: 6.5vh;
        }
        main .news .contn .info .mid{
            width: 1560px;
            position: relative;
            margin: 0 auto;
            height: 100%;
            /*z-index: 2;*/
        }
        main .news .contn .info .mid>*{
            width: 50%;
            height: 100%;
        }
        
        main .news .contn .info .newsSwp{
            height: 480px;
            margin-left: 50%;
        }
        main .news .contn .info .newsSwp .swiper-slide{
            padding: 25px 50px;
            transition: background .4s;
        }
        main .news .contn .info .newsSwp .swiper-slide-active,
        main .news .contn .info .newsSwp .swiper-slide:hover{
            background: #f8f8f3;
        }
        main .news .contn .info .newsSwp .swiper-slide .inner{
            height: 100%;
            position: relative;
        }
        main .news .contn .info .newsSwp .swiper-slide .inner .date,
        main .news .contn .info .showBox .itm .date{
            height: 110px;
            width: 100px;
            background: #ccc;
            text-align: center;
            font-size: 14px;
            color: #fff;
            line-height: 1;
            flex-direction: column;
        }
        main .news .contn .info .showBox .itm .date{
            background: #e60012;
            position: absolute;
            top: 25px;
            left: 0px;
        }
        main .news .contn .info .newsSwp .swiper-slide .inner .date .day,
        main .news .contn .info .showBox .itm .date .day{
            font-weight: bold;
            margin-bottom: 8px;
            font-size: 47px;
        }
        main .news .contn .info .newsSwp .swiper-slide .inner .dtl{
            flex: 1;
            padding-left: 25px;
        }
        main .news .contn .info .newsSwp .swiper-slide .inner .dtl p{
            font-size: 16px;
            line-height: 1.8;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            white-space: normal;
            word-break: break-all;
            color: #666;
        }
        main .news .contn .info .newsSwp .swiper-slide .inner .dtl .nsTtl{
            font-size: 21px;
            line-height: 1;
            margin-bottom: 15px;   
            -webkit-line-clamp: 1;
            color: #000;
        }

        main .news .contn .info .showBox{
            position: absolute;
            top: 0px;
            left: 0px;
        }
        main .news .contn .info .showBox .itm{
            padding-top: 45px;
            padding-right: 75px;
            opacity: 0;
            transition: opacity .4s;
            pointer-events: none;
            display: block;
        }
        main .news .contn .info .showBox .itm.active{
            opacity: 1;
            pointer-events: all;
            transition-delay: .3s;
        }
        main .news .contn .info .showBox .itm .pic{
            height: 320px;
        }
        main .news .contn .info .showBox .itm>p{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            white-space: normal;
            word-break: break-all;
            font-size: 21px;
        }
        main .news .contn .info .showBox .itm .nsTtl{
            margin: 15px 0px;
        }
        main .news .contn .info .showBox .itm .t{
            color: #666;
            font-size: 16px;
        }

        .mobileDevice main .pro.frozen::before{
            transform: scaleX(1);
        }
        .mobileDevice main .pro.frozen .contn .txt .proSwp .swiper-slide>*{
            opacity: 1;
            transform: translateY(0px);
        }
        .mobileDevice main .pro.frozen .contn .proShow{
            opacity: 1;
        }
        .mobileDevice main .pro.frozen .sideNav{
            transform: translateX(0px);
        }
        
        @media(max-width:1750px){
            main .heading .txtSwitch{
                right: 12%;
            }
            main .comp{
                padding: 0px 90px;
                padding-top: 19vh;
                padding-bottom: 14.8vh;
            }
            main .comp .contn .introSwp{
                max-width: 800px;
            }
            main .comp .contn .introSwp .ttl p{
                font-size: 52px;
            }
            main .comp .contn .introSwp .txt p:first-child{
                font-size: 42px;
            }
            main .comp .contn .introSwp .txt{
                margin-top: 50px;
                margin-bottom: 60px;
                font-size: 23px;
            }
            main .comp .contn .introSwp .more{
                font-size: 23px;
                width: 380px;
            }
            main .comp .contn .sideNav{
                width: 450px;
            }

            main .machining .contn .head .ttl .cn,
            main .news .head .ttl .cn{
                font-size: 70px;
            }
            main .machining .contn .head .ttl .eng,
            main .news .head .ttl .eng{
                font-size: 32px;
            }
            main .machining .contn .mecNavSwp .swiper-slide .inner .t{
                font-size: 48px;
            }

            main .news .contn .info .mid{
                width: calc(100% - 80px);
            }

            main .pro .contn{
                padding-top: 10vh;
                padding-bottom: 11vh;
            }
            main .pro .contn .txt{
                padding-top: 16vh;
            }
            main .pro .contn .txt .proSwp .swiper-slide .num{
                height: 40px;
            }
            main .pro .contn .txt .proSwp .proName{
                font-size: 120px;
                margin-top: 10px;
            }
            main .pro .contn .txt .proSwp .t{
                font-size: 24px;
                padding-right: 100px;
            }
            main .pro::before{
                top: -70px;
                height: calc(170px + 16vh + 10vh + 70px);
            }
            main .pro .contn .proShow img{
                max-width: 450px;
            }
            main .pro .sideNav .control{
                height: 120px;
                margin-top: 30px;
            }
            main .pro .sideNav .control>*{
                height: 30px;
            }
            main .pro .sideNav .control img{
                height: 24px;
                margin-bottom: 6px;
            }
            main .pro .sideNav .control p{
                height: 90px;
            }
            main .pro .sideNav .control p span{
                font-size: 20px;
            }
            main .pro .sideNav .control .next{
                bottom: -30px;
            }
            main .pro .sideNav .control .next img{
                margin-top: 6px;
            }
            
            main .distribution .ttl{
                left: 100px;
                bottom: 10vh;
            }
            main .distribution .ttl p{
                font-size: 30px;
            }
            main .distribution .ttl .cn{
                font-size: 45px;
                margin-bottom: 20px;
            }
        }
        @media(max-width:1600px){
            main .heading .txtSwitch{
                right: 8%;
                width: 320px;
            }
            main .heading .txtSwitch .txt, 
            main .heading .txtSwitch .txt .itm .inner{
                height: 220px;
            }
            main .heading .txtSwitch .control{
                height: 240px;
            }
            main .comp{
                padding-left: 80px;
                padding-right: 80px;
            }
            main .comp .contn .introSwp{
                max-width: 750px;
            }
            main .comp .contn .introSwp .ttl p{
                font-size: 40px;
            }
            main .comp .contn .introSwp .txt p:first-child{
                font-size: 32px;
            }
            main .comp .contn .introSwp .txt{
                font-size: 20px;
            }
            main .comp .contn .introSwp .more{
                font-size: 20px;
                width: 320px;
                line-height: 50px;
            }
            main .comp .contn .introSwp .more img{
                width: 12px;
            }

            main .comp .contn .sideNav{
                width: 400px;
            }
            main .comp .contn .sideNav .navSwp .swiper-slide{
                padding: 0px 20px;
            }
            main .comp .contn .sideNav .navSwp .swiper-slide .ttl::before{
                left: -20px;
            }
            main .comp .contn .sideNav .navSwp .swiper-slide .pic{
                width: 150px;
                height: 88px;
            }
            main .comp .contn .sideNav .navSwp .swiper-slide .ttl p{
                font-size: 17px;
            }

            main .machining .contn .head .ttl .cn,
            main .news .head .ttl .cn{
                font-size: 60px;
            }
            main .machining .contn .head .ttl .eng,
            main .news .head .ttl .eng{
                font-size: 28px;
            }
            main .machining .contn .head .more{
                font-size: 45px;
                margin-right: 0px;
            }
            main .machining .contn .head .more img {
                margin-left: 40px;
            }
            main .machining .contn .head .more:hover img {
                margin-left: 30px;
            }
            main .machining .contn .mecNavSwp .swiper-slide .inner .t{
                font-size: 40px;
            }
            main .machining .contn .mecNavSwp,
            main .machining .contn .mecNavSwp .swiper-slide .inner img{
                height: 60vh;
            }

            main .news .contn .head .ttl{
                padding-left: 30px;
            }
            main .news .contn .head .category{
                top: 18px;
                width: 210px;
            }
            main .news .contn .head .category a{
                line-height: 60px;
                font-size: 20px;
            }
            main .news .contn .info .newsSwp .swiper-slide{
                padding: 25px 35px;
            }
            main .news .contn .info .showBox .itm{
                padding-right: 45px;
            }

            main .pro .contn .txt .ttl p{
                font-size: 22px;
            }
            main .pro .contn .txt .ttl .cn{
                font-size: 32px;
                margin-bottom: 15px;
            }
            main .pro .contn .txt .proSwp .proName{
                font-size: 90px;
            }
            main .pro .contn .txt .proSwp .t{
                font-size: 20px;
                padding-right: 20px;
            }
            main .pro::before{
                height: calc(140px + 16vh + 10vh + 70px);
            }
            main .pro .contn .proShow img{
                max-width: 360px;
            }
            main .pro .contn .txt .proSwp .swiper-slide .more{
                width: 220px;
                font-size: 18px;
                line-height: 50px;
                padding-left: 30px;
            }
        }
        @media(max-width:1200px){
            main .heading .txtSwitch{
                right: 60px;
                width: 280px;
            }
            main .heading .txtSwitch .txt, 
            main .heading .txtSwitch .txt .itm .inner{
                height: 200px;
            }
            main .heading .txtSwitch .control{
                height: 220px;
            }
            main .heading .txtSwitch .txt .itm .inner p{
                font-size: 24px;
                padding: 0px 35px;
            }
            main .heading .txtSwitch .txt .itm .inner p:first-child{
                font-size: 32px;
                margin-bottom: 15px;
            }
            main .heading .txtSwitch .control .process p{
                margin: 30px 0px;
            }
            main .heading .txtSwitch .control .nums{
                font-size: 17px;
            }

            main .comp{
                padding-left: 50px;
                padding-right: 50px;
            }
            main .comp .contn .sideNav{
                height: calc(100% - 100px);
                width: 360px;
            }
            main .comp .contn .sideNav .navSwp .swiper-slide .ttl p{
                font-size: 16px;
            }
            main .comp .contn .sideNav .navSwp .swiper-slide .pic{
                width: 140px;
                height: 80px;
            }

            main .machining .contn .head .ttl .cn,
            main .news .head .ttl .cn{
                font-size: 50px;
                margin-bottom: 20px;
            }
            main .machining .contn .head .ttl .eng,
            main .news .head .ttl .eng{
                font-size: 24px;
            }
            main .machining .contn .head .more{
                font-size: 40px;
            }
            main .machining .contn .head .more img {
                margin-left: 30px;
            }
            main .machining .contn .head .more:hover img {
                margin-left: 20px;
            }
            main .machining .contn .mecNavSwp .swiper-slide .inner .t{
                font-size: 36px;
            }

            main .news .contn .info{
                padding-top: calc((63vh - 360px) / 2);
            }
            main .news .contn .info .newsSwp{
                height: 360px;
            }
            main .news .contn .info .newsSwp .swiper-slide{
                padding: 15px 20px;
            }
            main .news .contn .info .newsSwp .swiper-slide .inner .date, 
            main .news .contn .info .showBox .itm .date{
                height: 90px;
                width: 85px;
            }
            main .news .contn .info .newsSwp .swiper-slide .inner .date .day, 
            main .news .contn .info .showBox .itm .date .day{
                font-size: 36px;
            }
            main .news .contn .info .showBox .itm{
                padding-top: 30px;
            }
            main .news .contn .info .showBox .itm .date{
                top: 15px;
            }
            main .news .contn .info .showBox .itm .pic{
                height: 240px;
            }
            main .news .contn .info .newsSwp .swiper-slide .inner .dtl .nsTtl,
            main .news .contn .info .showBox .itm .nsTtl{
                margin-bottom: 5px;
            }
            main .pro .contn .proShow img{
                max-width: 320px;
                left: 20px;
            }
            main .pro .contn .txt .proSwp .proName{
                font-size: 70px;
            }
            main .pro::before{
                height: calc(120px + 16vh + 10vh + 70px);
            }
            main .pro .sideNav{
                width: 100px;
            }
            main .pro .sideNav .proNavSwp{
                height: 409px;
            }
            main .pro .sideNav .num{
                font-size: 24px;
                padding-right: 40px;
                height: 100px;     
                line-height: 100px;       
            }
            main .pro .sideNav .num::after{
                width: 35px;
            }
            

            main .distribution .map{
                width: 90%;
                max-width: 990px;
                height: auto;
            }
            main .distribution .mapPic{
                width: 100%;
                height: auto;
            }
            main .distribution .map div p{
                font-size: 18px;
            }
            main .distribution .map em{
                width: 8px;
                height: 8px;
            }
            main .distribution .map .logo{
                width: 100px;
                margin-left: -10px;
            }
        }
        @media(max-width:1100px){
            main .distribution .map{
                bottom: 50%;
                transform: translate(-50%,50%);
            }
        }
        @media(min-width:1025px){
            main .comp .contn .sideNav .navSwp .swiper-slide{
                justify-content: space-between;
            }
        }
        @media(max-width:1024px){
            main .heading .txtSwitch{
                right: 50px;
                width: 230px;
                bottom: 70px;
            }
            main .heading .txtSwitch .txt, 
            main .heading .txtSwitch .txt .itm .inner{
                height: 170px;
            }
            main .heading .txtSwitch .control{
                height: 185px;
            }
            main .heading .txtSwitch .txt .itm .inner p{
                font-size: 20px;
                padding: 0px 25px;
            }
            main .heading .txtSwitch .txt .itm .inner p:first-child{
                font-size: 26px;
                margin-bottom: 15px;
            }
            main .heading .txtSwitch .control .process p{
                margin: 20px 0px;
            }
            main .heading .txtSwitch .control .nums{
                font-size: 14px;
            }
            main .heading .txtSwitch .control img{
                width: 12px;
                left: calc(100% + 16px);
            }
            main .heading .txtSwitch .control .prev{
                right: calc(100% + 16px);
            }

            main .comp{
                padding: 0px 30px;
                padding-top: 130px;
                padding-bottom: 110px;
            }
            main .comp .contn .sideNav{
                height: 100%;
                width: 200px;
            }
            main .comp .contn .sideNav .btn{
                height: 30px;
            }
            main .comp .contn .sideNav .btn img{
                width: 15px;
            }
            main .comp .contn .sideNav .navSwp .swiper-slide{
                flex-direction: column;
                align-items: initial;
                padding: 0px 15px;
            }
            main .comp .contn .sideNav .navSwp .swiper-slide .ttl{
                margin-bottom: 10px;
            }
            main .comp .contn .sideNav .navSwp .swiper-slide .ttl .eng{
                margin-bottom: 3px;
            }
            main .comp .contn .sideNav .navSwp .swiper-slide .ttl p{
                font-size: 14px;
            }
            main .comp .contn .sideNav .navSwp .swiper-slide .ttl::before{
                left: -15px;
            }
            main .comp .contn .sideNav .navSwp .swiper-slide .pic{
                width: 100%;
                padding-bottom: 58%;
                position: relative;
            }
            main .comp .contn .sideNav .navSwp .swiper-slide .pic img{
                position: absolute;
                top: 0px;
                left: 0px;
            }

            main .machining .contn .head .ttl .cn,
            main .news .head .ttl .cn{
                font-size: 42px;
                margin-bottom: 15px;
            }
            main .machining .contn .head .ttl .eng,
            main .news .head .ttl .eng{
                font-size: 20px;
            }
            main .machining .contn .head .more{
                font-size: 32px;
                line-height: 50px;
            }
            main .machining .contn .head .more img {
                margin-left: 25px;
                width: 50px;
            }
            main .machining .contn .head .more:hover img {
                margin-left: 15px;
            }
            main .machining .contn .mecNavSwp .swiper-slide{
                width: 25%;
            }
            main .machining .contn .mecNavSwp .swiper-slide.active{
                width: 50%;
            }
            main .machining .contn .mecNavSwp .swiper-slide .inner .t{
                font-size: 32px;
            }
            
            main .news .contn .head{
                width: 100%;
                padding: 0px 12.5%;
            }
            main .news .contn .head .ttl{
                padding-left: 0px;
            }
            main .news .contn .head .category{
                width: calc(18.75% - 1px);
                left: auto;
                right: 12.5%;
            }
            main .news .contn .head .category a{
                line-height: 40px;
                font-size: 18px;
                margin-bottom: 10px;
            }
            main .news .contn .info .newsSwp{
                width: 320px;
                margin-left: calc(100% - 320px);
            }
            main .news .contn .info .showBox{
                width: calc(100% - 320px);
            }
            main .news .contn .info .newsSwp .swiper-slide .inner .dtl .nsTtl,
            main .news .contn .info .showBox .itm .nsTtl{
                font-size: 18px;
            }
            main .news .contn .info .newsSwp .swiper-slide .inner .dtl .t,
            main .news .contn .info .showBox .itm .t{
                font-size: 14px;
            }
            main .news .contn .info .newsSwp .swiper-slide .inner .dtl{
                padding-left: 15px;
            }
            main .news .contn .info .showBox .itm{
                padding-right: 25px;
            }

            main .pro .contn .txt .proSwp .proName{
                font-size: 40px;
            }
            main .pro::before{
                height: calc(90px + 16vh + 10vh + 70px);
            }
            main .pro .contn .txt .proSwp .t{
                font-size: 16px;
            }
            main .pro .contn .txt .proSwp .swiper-slide .more{
                width: 180px;
                font-size: 16px;
                line-height: 45px;
                padding-left: 20px;
            }
            main .pro .contn .proShow .itm{
                padding-top: 16vh;
            }
            main .pro .contn .proShow img{
                left: 0px;
                max-width: 280px;
                position: initial;
                transform: initial;
            }

            main .distribution .ttl{
                left: 80px;
                bottom: 10vh;
            }
            main .distribution .ttl p{
                font-size: 24px;
            }
            main .distribution .ttl .cn{
                font-size: 36px;
                margin-bottom: 15px;
            }

            main .distribution .map div p{
                font-size: 16px;
            }
            main .distribution .map .logo{
                width: 90px;
            }
        }

        @media(min-width:768px){
            main .comp .contn .sideNav .btn::after{
                display: none;
            }
            main .news .contn .head{
                display: block;
            }
        }

        @media(max-width:767px){
            main .heading .txtSwitch{
                right: 20px;
                width: 150px;
                bottom: 40px;
            }
            main .heading .txtSwitch .txt, 
            main .heading .txtSwitch .txt .itm .inner{
                height: 100px;
            }
            main .heading .txtSwitch .control{
                height: 90px;
            }
            main .heading .txtSwitch .txt .itm .inner p{
                font-size: 14px;
                padding: 0px 15px;
            }
            main .heading .txtSwitch .txt .itm .inner p:first-child{
                font-size: 18px;
                margin-bottom: 10px;
            }
            main .heading .txtSwitch .control .process p{
                margin: 15px 0px;
                width: 90px;
            }
            main .heading .txtSwitch .control img{
                width: 10px;
                left: calc(100% + 8px);
            }
            main .heading .txtSwitch .control .prev{
                right: calc(100% + 8px);
            }


            main .comp{
                padding: 60px 20px;
                padding-bottom: 130px;
            }
            main .comp .contn{
                position: initial;
            }
            main .comp .contn .introSwp{
                margin-right: 0px;
            }
            main .comp .contn .introSwp .swiper-slide{
                padding: 0px;
            }
            main .comp .contn .introSwp .ttl p{
                font-size: 24px;
            }
            main .comp .contn .introSwp .ttl .eng{
                margin-bottom: 10px
            }
            main .comp .contn .introSwp .txt{
                margin-top: 25px;
                margin-bottom: 35px;
                line-height: 1.6;
            }
            main .comp .contn .introSwp .txt p:first-child{
                font-size: 18px;
                margin-bottom: 15px;
            }
            main .comp .contn .introSwp .txt{
                font-size: 14px;
            }
            main .comp .contn .introSwp .more{
                font-size: 14px;
                width: 120px;
                line-height: 35px;
                border-radius: 5px;
                padding-right: 15px;
            }
            main .comp .contn .introSwp .more img{
                right: 15px;
                width: 10px;
            }
            main .comp .contn .sideNav{
                position: absolute;
                display: block;
                width: 40px;
                right: 20px;
                bottom: 20px;
                height: auto;
                border-radius: 0px;
            }
            main .comp .contn .sideNav .navSwp,
            main .comp .contn .sideNav::after{
                display: none;
            }
            main .comp .contn .sideNav .btn{
                height: 40px;
                border-radius: 5px;
                cursor: pointer;
            }
            main .comp .contn .sideNav .prev{
                margin-bottom: 12px;
            }
            main .comp .contn .sideNav .btn img{
                width: auto;
            }

            main .machining .contn .head{
                padding-left: 20px;
                padding-right: 20px;
            }
            main .machining .contn .head .ttl .cn,
            main .news .head .ttl .cn{
                font-size: 30px;
                margin-bottom: 10px;
            }
            main .machining .contn .head .ttl .eng,
            main .news .head .ttl .eng{
                font-size: 16px;
            }
            main .machining .contn .head .more{
                font-size: 20px;
                width: 100px;
                text-align: right;
                line-height: 30px;
            }
            main .machining .contn .head .more img {
                margin-left: 10px;
                width: 30px;
            }
            main .machining .contn .head .more:hover img {
                margin-left: 0px;
            }
            main .machining .contn .mecNavSwp .swiper-slide .inner .t{
                font-size: 18px;
                padding: 0px 15px;
            }
            
            main .news{
                height: initial;
            }
            main .news .contn{
                padding-top: 40px;
            }
            main .news .contn .head{
                padding: 0px 35px;
            }
            main .news .contn .head .category{
                width: 100px;
                position: initial;
            }
            main .news .contn .head .category a{
                line-height: 33px;
                font-size: 16px;
            }
            main .news .contn .info{
                position: relative;
                margin-top: 50px;
                padding: 35px 20px;
            }
            main .news .contn .info .newsSwp{
                display: none;
            }
            main .news .contn .info .mid,
            main .news .contn .info .showBox{
                width: 100%;
            }
            main .news .contn .info .showBox{
                position: initial;
            }
            main .news .contn .info .showBox .itm{
                opacity: 1 !important;
                position: relative;
                margin-bottom: 10px;
                padding-right: 0px;
            }
            main .news .contn .info .showBox .itm .date{
                width: 75px;
                height: 80px;
            }
            main .news .contn .info .showBox .itm .date .day{
                font-size: 24px;
                margin-bottom: 5px;
            }
            main .news .contn .info .showBox .itm .pic{
                height: 210px;
            }

            main .pro .contn{
                padding-top: 30px;
                overflow: hidden;
            }
            main .pro .contn .txt{
                padding-top: 50px;
                width: 100%;
            }
            main .pro .sideNav .proNavSwp,
            main .pro .sideNav .num,
            main .pro .sideNav .control p{
                display: none;
            }
            main .pro .contn .txt .proSwp .swiper-slide .num{
                height: 30px;
                font-size: 18px;
            }
            main .pro .contn .txt .proSwp .proName{
                font-size: 30px;
            }
            main .pro .contn .txt .proSwp .t{
                font-size: 14px;
                padding-right: 0px;
                margin-top: 10px;
            }
            main .pro::before{
                width: 120px;
                top: -30px;
                height: calc(60px + 50px + 40px + 30px);
            }
            main .pro .contn .txt .ttlBox{
                white-space: normal;
            }
            main .pro .contn .txt .ttlBox .ttl{
                width: 75vw;
            }
            main .pro .contn .txt .ttl p{
                font-size: 16px;
            }
            main .pro .contn .txt .ttl .cn{
                font-size: 24px;
                margin-bottom: 10px;
            }
            main .pro .sideNav{
                width: 40px;
                top: auto;
                bottom: 50px;
            }
            main .pro .sideNav .control{
                height: initial;
                margin-top: 0px;
                transform: rotate(-90deg);
                padding-bottom: 15px;
                transform-origin: bottom right;
            }
            main .pro .sideNav .control>*{
                height: 30px !important;
            }
            main .pro .sideNav .control img{
                margin: 0px !important;
                height: 20px;
            }
            main .pro .sideNav .control .next{
                position: initial;
                border-width: 0px;
            }
            main .pro .contn .proShow{
                position: absolute;
                text-align: center;
                width: 100%;
            }
            
            main .pro .contn .proShow img{
                max-width: initial;
                width: 100%;
                display: inline-block;
            }
            main .pro .contn .proShow .itm{
                padding-top: 260px;
            }
            main .pro .contn .txt .proSwp{
                height: 100%;
            }
            main .pro .contn .txt .proSwp .swiper-slide .more{
                width: 100px;
                line-height: 30px;
                font-size: 12px;
                padding-left: 10px;
                margin-top: 10px;
                position: absolute;
                right: 2px;
            }
            main .pro .contn .txt .proSwp .more img{
                right: 10px;
                width: 8px;
            }

            main .distribution .ttl{
                bottom: auto;
                left: 40px;
                top: 30px;
            }
            main .distribution .ttl .cn{
                font-size: 24px;
                margin-bottom: 10px;
            }
            main .distribution .ttl p{
                font-size: 16px;
            }
            main .distribution .map div p{
                font-size: 12px;
            }
            main .pro .color,
            main .distribution .map .logo{
                display: none;
            }
            main .pro.frozen::before{
                transform: scaleX(1);
            }
            main .pro.frozen .contn .txt .proSwp .swiper-slide>*{
                opacity: 1;
                transform: translateY(0px);
            }
            main .pro.frozen .contn .proShow{
                opacity: 1;
            }
            main .pro.frozen .sideNav{
                transform: translateX(0px);
            }
        }
        @media(max-width:374px){
            main .pro .contn .proShow img{
                width: 80%;
            }
            main .pro .contn .proShow .itm{
                padding-top: 240px;
            }
        }